<template>
  <div>
    <el-tree
    node-key="id" 
    default-expand-all
    ref="tree" 
    show-checkbox 
    :data="list" 
    :props="{label:'name'}" />
    <el-row>
      <el-button @click="$emit(close)" type="primary">取消</el-button>
      <el-button  @click="hSubmit"  type="primary">确定</el-button>
    </el-row>
  </div>
</template>

<script>
import { getPermissionList } from '@/api/permissions'
import { transDataToTreeData } from '@/utils'
import { assignPermission, getRolesDetail } from '@/api/settings'
export default {
  props:{
    curId:{
      type:String,
      required:true
    }
  },
  data(){
    return{
      list:[]
    }
  },
  created(){
    this.loadAssignPer()
  },
  methods:{
    async hSubmit(){
      try {
        const permIds=this.$refs.tree.getCheckedKeys()
        const res = await assignPermission({id:this.curId,permIds})
        // console.log('assignPermission', res)
        this.$emit('close')
      } catch (err) {
        console.log('assignPermission', err)
      }
    },
    async loadAssignPer(){
      try {
        const res = await getPermissionList()
        // console.log('getPermissionList', res)
        const detail = await getRolesDetail(this.curId);
        this.$refs.tree.setCheckedKeys(detail.data.permIds);
        this.list = transDataToTreeData(res.data);
      } catch (err) {
        console.log('getPermissionList', err)
      }
    },
  }
}
</script>